<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <style>
      .toDoList {
        width: 500px;
        border: 2px solid red;
      }
      .finish {
        text-decoration: line-through;
      }
      .toDoList li {
        cursor: pointer;
        height: 60px;
        display: flex;
        justify-content: space-between;
        padding: 5px;
        border: 1px solid bisque;
      }
      * {
        padding: 0;
        margin: 0;
        list-style: none;
      }
    </style>
    <div id="app">
      <to-do-list
        @change="changeData"
        :list-data="toDoList"
        @addevent="add"
      ></to-do-list>
    </div>

    <template id="toDoList">
      <div class="toDoList">
        <h2>待办事项</h2>
        <div>
          <input type="text" v-model="inputVal" />
          <button @click="addToDoEvent">添加</button>
          <ul>
            <!-- 代办事项子组件 -->
            <to-do-item
              v-for="(item,idx) in listData"
              @itemfinish="finishEvent"
              :event="item.event"
              :status="item.status"
              :idx="idx"
              :key="idx"
            ></to-do-item>
          </ul>
        </div>
      </div>
    </template>

    <template id="toDoItem">
      <li @click="finish">
        <b :class="status==false?'':'finish'">{{event}}</b>
        <span @click.stop="delItem">X</span>
      </li>
    </template>

    <script src="./vue.js"></script>
    <script>
      let toDoItem = {
        template: "#toDoItem",
        //子组件接收每项待办事项的数据
        props: ["event", "status", "idx"],
        methods: {
          finish() {
            this.$emit("itemfinish", this.idx, "change");
          },
          delItem() {
            console.log("哈哈");
            this.$emit("itemfinish", this.idx, "del");
          },
        },
      };
      let toDoList = {
        template: "#toDoList",
        //父组件接收待办事项所有数据
        props: ["listData"],
        data() {
          return {
            inputVal: "",
          };
        },
        components: {
          toDoItem,
        },
        methods: {
          finishEvent(idx, type) {
            console.log("当前下标" + idx);
            this.$emit("change", idx, type);
          },
          addToDoEvent() {
            let data = {
              event: this.inputVal,
              status: false,
            };
            this.inputVal = "";
            this.$emit("addevent", data);
          },
        },
      };

      let vm = new Vue({
        el: "#app",
        components: {
          toDoList,
        },
        methods: {
          changeData(idx, type) {
            console.log(type);

            if (type == "change") {
              this.toDoList[idx].status = !this.toDoList[idx].status;
            } else {
              this.toDoList.splice(idx, 1);
            }
          },
          add(data) {
            this.toDoList.push(data);
          },
        },

        data: {
          toDoList: [
            {
              event: "吃饭",
              status: false,
            },
            {
              event: "睡觉",
              status: false,
            },
            {
              event: "打豆豆",
              status: false,
            },
          ],
        },
      });
    </script>
  </body>
</html>
